<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <button id="add" href="javascript:void(0)">添加</button>
    <div id="box"></div>

    <script src="common.js"></script>
    <script>
        //给添加按钮注册事件
        var addLink = my$("add");
        addLink.onclick = function() {
            var tr = document.createElement("tr");
            tbody.appendChild(tr);

            //生成前三列  文本框
            for(var i = 0; i < 3; i++) {
                var td = document.createElement("td");
                tr.appendChild(td);
                td.innerHTML = "<input type='text' style='width: 60px'>";
            }
            //最后一个td  确定 取消
            td = document.createElement("td");
            tr.appendChild(td);
            td.innerHTML= "<a href='javascript:void(0)'>确定</a>&nbsp;<a href='javascript:void(0)'>取消</a>";

            //点击取消  获取取消的a
            var linkCancel = getLastElement(td);
            linkCancel.onclick  = function() {
                //移除当前行
//                tbody.removeChild(getLastElement(tbody));

                tbody.removeChild(this.parentNode.parentNode)
            }

            //点击确定  获取确定的a
            var linkSure = getFirstElement(td);
            linkSure.onclick = function() {
                //1 获取文本框的值
                //tr.children[0] 第一个td
                var name = tr.children[0].children[0].value;
                var subject = tr.children[1].children[0].value;
                var score = tr.children[2].children[0].value;
                //2 把获取到的数据添加到datas中
                datas.push({"name":name,"subject":subject,"score":score});
                //3 刷新表格--重新生成表格
                //?
                createTable();
            }
        }

        //表头的数据
        var heads = ["姓名","科目","成绩","操作"];
        var datas = [
            {"name":"张三1","subject":"语文1","score":99.8},
            {"name":"张三2","subject":"语文2","score":80.8},
            {"name":"张三3","subject":"语文3","score":70.8},
            {"name":"张三4","subject":"语文4","score":100},
            {"name":"张三5","subject":"语文5","score":60},
            {"name":"张三6","subject":"语文6","score":70},
            {"name":"张三7","subject":"语文7","score":89.8}
        ];

        //获取box
        function createTable() {
            var box = my$("box");
            //判断页面上是否有table，如果有的话，删除
            var table = getFirstElement(box);
            if(table) {
                box.removeChild(table);
            }

            //1 生成表格table
            table = document.createElement("table");
            //设置宽度和边框
            table.border = "1px";
            table.style.width = "400px";
            table.style.borderCollapse = "collapse";
            //把表格添加到box中
            box.appendChild(table);

            //2 生成表头
            //thead
            var thead = document.createElement("thead");
            table.appendChild(thead);

            var tr = document.createElement("tr");
            //设置样式
            tr.style.backgroundColor = "#cccccc";
            tr.style.height = "60px";
            //把tr添加到表格中
            thead.appendChild(tr);
            for (var i = 0; i < heads.length; i++) {
                //创建th
                var th = document.createElement("th");
                //把th添加到tr中
                tr.appendChild(th);
                //设置内容
                setInnerText(th,heads[i]);
            }

            //3 生成数据
            tbody = document.createElement("tbody");
            table.appendChild(tbody);

            //设置数据行的内容居中，通过tbody
            tbody.style.textAlign = "center";

            //遍历的行
            for (var i = 0; i < datas.length; i++) {
                //每一项是一个学生对象
                var data = datas[i];
                //创建行
                tr = document.createElement("tr");
                //把tr添加到table中
                tbody.appendChild(tr);

                //遍历学生对象的所有属性
                //遍历列
                for(var key in data) {
                    //创建td
                    var td = document.createElement("td");
                    //把td添加到数据行
                    tr.appendChild(td);
                    //设置td中显示的内容
                    setInnerText(td, data[key]); //data.name
                }

                //增加删除的列
                var td = document.createElement("td");
                tr.appendChild(td);
                var link = document.createElement("a");
                td.appendChild(link);
                //设置内容
                setInnerText(link,"删除");
                link.href = "javascript:void(0)";

                //给删除注册事件
                link.onclick = removeTr;
            }
        }


        //加载表格
        createTable();

        //删除行
        function removeTr() {
            //让父元素移除子元素
            tbody.removeChild(this.parentNode.parentNode);
        }

    </script>
</body>

</html>